<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'

import { useECharts } from '@/hooks/web/use-echarts'

export default defineComponent({
  props: {
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(100vh - 78px)',
    },
  },
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null)
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
    const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370]
    const yAxisData = [
      '原因1',
      '原因2',
      '原因3',
      '原因4',
      '原因5',
      '原因6',
      '原因7',
      '原因8',
      '原因9',
      '原因10',
    ]
    onMounted(() => {
      setOptions({
        backgroundColor: '#0f375f',
        title: [
          {
            text: '各渠道投诉占比',
            left: '2%',
            top: '1%',
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
          {
            text: '投诉原因TOP10',
            left: '40%',
            top: '1%',
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
          {
            text: '各级别投诉占比',
            left: '2%',
            top: '50%',
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
        ],
        grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
        tooltip: {
          formatter: '{b} ({c})',
        },
        xAxis: [
          {
            gridIndex: 0,
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
            axisLine: { show: false },
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            interval: 0,
            data: yAxisData.reverse(),
            axisTick: { show: false },
            axisLabel: { show: true },
            splitLine: { show: false },
            axisLine: { show: true, lineStyle: { color: '#6173a3' } },
          },
        ],
        series: [
          {
            name: '各渠道投诉占比',
            type: 'pie',
            radius: '30%',
            center: ['22%', '25%'],
            data: [
              { value: 335, name: '客服电话' },
              { value: 310, name: '奥迪官网' },
              { value: 234, name: '媒体曝光' },
              { value: 135, name: '质检总局' },
              { value: 105, name: '其他' },
            ],
            labelLine: { show: false },
            label: {
              show: true,
              formatter: '{b} \n ({d}%)',
              color: '#B1B9D3',
            },
          },
          {
            name: '各级别投诉占比',
            type: 'pie',
            radius: '30%',
            center: ['22%', '75%'],
            labelLine: { show: false },
            data: [
              { value: 335, name: 'A级' },
              { value: 310, name: 'B级' },
              { value: 234, name: 'C级' },
              { value: 135, name: 'D级' },
            ],
            label: {
              show: true,
              formatter: '{b} \n ({d}%)',
              color: '#B1B9D3',
            },
          },
          {
            name: '投诉原因TOP10',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: '45%',
            itemStyle: { color: '#86c9f4' },
            label: { show: true, position: 'right', color: '#9EA7C4' },
            data: dataAll.sort(),
          },
        ],
      })
    })
    return { chartRef }
  },
})
</script>
